import wxValidate from "wechat-validate";
Page({
  behaviors: [wxValidate],
  data: {
    currentDate: new Date().getTime(),
    houseLayerVisible: false,
    repairLayerVisible: false,
    dateLayerVisible: false,
    houseList: [], // 可选房屋列表
    repairItem: [], // 维修项目
    attachment: [], // 文件列表
    houseId: "", // 选中的房屋id
    houseInfo: "", // 选中的房屋信息
    repairItemId: "", // 维修内容id
    repairItemName: "", // 维修内容
    appointment: "", // 时间
    mobile: "", // 手机号
    description: "", // 描述信息
  },
  rules: {
    houseId: [{ required: true, message: "请选择报修房屋!" }],
    repairItemId: [{ required: true, message: "请选择维修的项目!" }],
    mobile: [
      { required: true, message: "请填写手机号码!" },
      { pattern: /^1[3-8]\d{9}$/, message: "请填写正确的手机号码!" },
    ],
    appointment: [{ required: true, message: "请选择预约日期!" }],
    description: [{ required: true, message: "请填写问题描述!" }],
  },
  onLoad() {
    this.getHouseList();
    this.getRepairItem();
  },
  selectHouse(e) {
    // console.log(e) => !==
    this.setData({
      houseId: e.detail.id,
      houseInfo: e.detail.name,
    });
  },
  async getHouseList() {
    const { code, data } = await wx.http.get("/house");
    // 检测接口是否调用成功
    if (code !== 10000) return wx.utils.toast();
    this.setData({
      houseList: data,
    });
  },
  openHouseLayer() {
    this.setData({ houseLayerVisible: true });
  },
  closeHouseLayer() {
    this.setData({ houseLayerVisible: false });
  },
  openRepairLayer() {
    this.setData({ repairLayerVisible: true });
  },
  closeRepairLayer() {
    this.setData({
      repairLayerVisible: false,
    });
  },

  openDateLayer() {
    this.setData({ dateLayerVisible: true });
  },
  closeDateLayer() {
    this.setData({ dateLayerVisible: false });
  },
  goList() {
    wx.reLaunch({
      url: "/repair_pkg/pages/list/index",
    });
  },
  async getRepairItem() {
    // 1、请求接口获取可选的维修列表数据
    const { code, data } = await wx.http.get("/repairItem");
    if (code !== 10000) return wx.utils.toast();
    // 2、获取到结果保存到data里面
    this.setData({
      repairItem: data,
    });
  },
  selectRepairItem(ev) {
    // 把用户选择的结果存储到data >> 进行界面的展示
    this.setData({
      repairItemId: ev.detail.id,
      repairItemName: ev.detail.name,
    });
  },
  selectTime(e) {
    this.setData({
      appointment: wx.utils.dataFormat(e.detail),
      dateLayerVisible: false, // 获取到时间之后需要关闭弹层
    });
  },
  uploadPicture(e) {
    // console.log(e);
    wx.uploadFile({
      filePath: e.detail.file.url, // 用户选择的文件
      name: "file",
      url: wx.http.baseURL + "/upload", // 服务器的接口地址
      header: {
        Authorization: "Bearer " + getApp().token,
      },
      success: (res) => {
        const { code, data } = JSON.parse(res.data);
        if (code !== 10000) return wx.utils.toast();
        // 上传的结果拼接之后赋值给attachemnt
        this.setData({
          attachment: this.data.attachment.concat({ url: data.url }),
        });
      },
    });
  },
  async submitForm() {
    // 1、进行表单校验
    if (!this.validate()) return;
    // 2、解构出数据
    const {
      houseId,
      repairItemId,
      mobile,
      appointment,
      description,
      attachment,
    } = this.data;
    // 3、调用接口提交数据
    const { code } = await wx.http.post("/repair", {
      houseId,
      repairItemId,
      mobile,
      appointment,
      description,
      attachment,
    });

    // 4、判断状态码
    if (code !== 10000) return wx.utils.toast();

    // 5、跳转到报修列表页面
    wx.redirectTo({
      url: "/repair_pkg/pages/list/index",
    });
  },
});

// 1、获取房屋列表数据展示 ==> houseList
// 2、houseList和van-cell-swiper里面的actions属性绑定
// 3、选择完毕之后，需要拿到选择的结果 ==> 监听select事件
// 4、获取用户选择的结果 ==> 存储到data里面
// 5、进行页面的渲染 ==> 用户选择的结果渲染到单元格 ==> 如果没有内容需要渲染一个默认内容
